<!-- 考前读列表 更多 -->
<template>
  <div class="page-view">
    <div class="news-list">
      <!-- 资讯title -->
      <div class="news-list-titel titel ">
        {{ NewsTypeName }}
      </div>
      <!-- 资讯列表 -->
      <ul class="news-list-ul">
        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="— 没有更多了 —"
          @load="getNewsList"
        >
          <router-link
            v-for="item in NewsList"
            :key="item.NewsId"
            :to="{name: 'newsDetail', query: {newsId: item.NewsId}}"
            class="news-list-ul-li"
            tag="li"
          >
            <div
              :title="item.Titel"
              class="news-left-list"
            >
              {{ item.Title }}
            </div>
            <div
              :titel="item.DateTime"
              class="news-date"
            >
              {{ item.DateTime }}
            </div>
          </router-link>
        </van-list>
      </ul>
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  data () {
    return {
      categoryId: this.$route.query.categoryId,
      NewsList: [],
      NewsTypeName: '',
      pageSize: 8,
      pageNum: 1,
      loading: true,
      finished: false,
    }
  },
  // 接口数据加载
  created () {
    this.categoryId = this.$route.query.categoryId
    this.getNewsList()
  },
  methods: {
    // 调用资讯列表
    getNewsList () {
      this.$axios({
        url: 'news/getNewsInfoListByIdForCmp',
        data: {
          newstypeid: this.categoryId,
          Page: this.pageNum,
          PageSize: this.pageSize,
        },
      }).then(res => {
        if (this.pageNum === 1) {
          this.NewsTypeName = res.NewsTypeName
        }
        this.$set(this.$data, 'NewsList',
          [...this.NewsList, ...res.NewsList])
        this.loading = false

        if (this.pageNum >= res.SumPage) {
          this.finished = true
        } else {
          this.pageNum++
        }
      })
    },
  },
})
</script>
<style lang="scss" scoped>
@import "~scss/news/news.scss";
.titel{
  font-size: 36px;
  text-align: left;
  padding: 40px 0px 10px;
  // border-bottom: 1px solid #eaeaea;
  @include px1border(bottom, #eaeaea);
  color: #333333;
}
</style>
